<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件指令</title>
    <script src="js/vue.global.js"></script>

</head>
<body>
<div id="box">
    <p v-if="role == 2">尊敬的VIP会员，热烈欢迎来到我们的网站！</p>
    <p v-else-if="role == 1">尊敬的普通会员，欢迎来到我们的网站！</p>
    <p v-else>尊敬的游客，欢迎来到我们的网站！</p>

    <div v-if="role == 0 ">
        尊敬的游客，欢迎来到我们的网站，请进行注册！
    </div>
    <div v-else>
        尊敬的会员，欢迎回来本站~
        <p v-if="role == 1">
           您是本站的普通会员，能享受本站的会员基本功能
        </p>
        <p v-else-if="role == 2">尊敬的VIP会员，热烈欢迎来到我们的网站！</p>
        <p v-else-if="role == 3">尊敬的高级VIP会员，热烈欢迎来到我们的网站！</p>
    </div>
</div>
<script>
    var oc_vm = Vue.createApp({
        data(){
            return{
                role: 2, //0 ，登录；1，普通会员；2，vip会员
            }
        }
    }).mount("#box")
</script>
</body>
</html>